<template>
  <div class="pro">
    <h2>Vuex 状态管理数据</h2>
    <!-- 第六步：获取  store state 数据 -->
    <!-- 第一种获取 store 数据的方法，在 Vue3 中我们不推荐 -->
    <h3>当前登录的用户是：{{ $store.state.userName }}</h3>
    <!-- 第二种获取 store 数据的方法，使用 hook 来直接读取，推荐这种方法 -->
    <h3>当前登录的用户是：{{ store.state.userName }}</h3>

    <button @click="login">点击登录</button>
    <button @click="logout">点击退出</button>

    <hr>
    <h2>当前计数器的值是：{{ num }}</h2>
    <button @click="add">+</button>
    <button @click="muit">-</button>

  </div>
</template>

<script setup>
// 注意：这个地方需要使用 解构的方式来进行操作
import { useStore } from 'vuex';
import useCount from '../hooks/useCount'
const store = useStore();
console.log("通过 hook 拿到的 store 数据", store.state.userName);

// 第七步：修改 store 里面的数据
const login = () => store.dispatch("login", "前端老兵");
const logout = () => store.dispatch("logout");

const { num, add, muit } = useCount();


</script>

<style>

</style>